<template>
    <div class="bannerArea">
        <div class="slider" :style="{'width':banner.items.length * banner.width+'px'}">
            <div class="banner"
                 v-for="val of banner.items" @tap="bannerClick(val.url)"
                 :style="{height:banner.height+'px',width:banner.width+'px','background-image':'url('+val.pic+'?imageView2/1/w/630/h/300)'}">
            </div>
        </div>
    </div>

    <div v-if="sec_kill&&sec_kill.length>0" class="ui-box">
        <div class="box-title ui-v-a" v-link="{name:'seckills'}">
            <span>限时秒杀</span>

            <div class="ui-more">
                <span>更多</span>
            </div>
        </div>
        <div class="ui-c-f">
            <div class="item" v-for="val of sec_kill" track-by="_id">
                <div v-link="{name:'product',params:{sku_id:val._id, spu_id: 0}}">

                    <div v-if="val.state">
                        <div v-if="val.stock>0" class="tag-timer">
                            <span>{{val.time_kill | timeFormat 'h小时m分s后结束'}}</span>
                        </div>
                        <div v-if="val.stock==1&&val.time_kill>0" class="tag-last">
                            <span>最后一件</span>
                        </div>
                        <div v-if="val.stock==0" class="tag-sellout">
                            <span>秒杀结束</span>
                        </div>
                    </div>
                    <div v-else>
                        <div class="tag-timer">
                            <span>{{getSecKillDateStr(val)}}</span>
                        </div>
                    </div>
                    <img :src="val.pic+'?imageView2/2/w/300/'">
                    <p class="ui-v-a"><span>{{val.title}}</span></p>
                    <span class="ui-price price-red">{{val.price/10}}</span>
                    <span v-if="val.price_cost" class="ui-price price-gray">{{val.price_cost/10}}</span>
                </div>
            </div>
        </div>
    </div>

    <!--<div class="ui-box">-->
    <!--<div class="box-title ui-v-a">-->
    <!--<span>本周热卖</span>-->

    <!--<div class="ui-more">-->
    <!--<span>更多</span>-->
    <!--</div>-->
    <!--</div>-->
    <!--<div class="hotsaleArea">-->
    <!--<div class="slider">-->
    <!--<div v-for="val of hot_sale" track-by="_id" class="hot-item"-->
    <!--v-link="{name:'product',params:{id:val._id}}">-->
    <!--<img :src="val.pic+'?imageView2/2/w/200/'">-->

    <!--<p class="ui-v-a"><span>{{val.title}}</span></p>-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->

    <div class="ui-box" v-for="item of goods">
        <div class="box-title ui-v-a">
            <span>{{item.category.name}}</span>

            <div class="ui-more"
                 v-link="{name:'products',params:{category:item.category._id,category_name:encodeURIComponent(item.category.name),brand:0,brand_name:0}}">
                <span>更多</span>
            </div>
        </div>

        <div class="ui-c-f">
            <div v-for="val of item.list" class="item" track-by="_id" @click="goTo(item.type,val)">
                <div>
                    <img :src="val.pic+'?imageView2/2/w/300'">

                    <p class="ui-v-a"><span>{{val.title}}</span></p>
                    <span class="ui-price price-red">{{val.price/10}}</span>
                </div>
            </div>
        </div>

        <template v-if="item.category._id=='56fdf94abe32e20c27f57f52'&& machine_brand.length>0">
            <div class="brand-title"><span>热销品牌</span>
            </div>
            <div class="brandArea">
                <div class="slider">
                    <div v-for="val of machine_brand" class="brand" track-by="_id"
                         v-link="{name:'products',params:{brand:val._id,brand_Name:encodeURIComponent(val.name),category:'56fdf94abe32e20c27f57f52',category_name:encodeURIComponent('纹身机')}}">
                        <img :src="val.pic+'?imageView2/2/w/200'">
                    </div>
                </div>

            </div>
        </template>
    </div>

</template>


<script>
    import IScroll from 'iscroll';
    import http from '../libs/http'
    import {dateFormat,timeFormat} from '../filters/dateFormat';

    var apiList = {
        getInfo: api + 'homepage'
    };
    var secKillTimer;

    export default{
        components: {},
        data(){
            return {
                a: 1,
                banner: {
                    height: window.screen.width * 480 / 960,
                    width: window.screen.width,
                    items: [
//                        {
//                            pic: 'http://img.meizhanggui.cc/08679bc3ddc4a550ecdd6afd7b14dee7',
//                        }, {
//                            pic: 'http://img.meizhanggui.cc/08679bc3ddc4a550ecdd6afd7b14dee7',
//                        }
                    ]
                },
                listOrder: [
                    '56fdf94abe32e20c27f57f52', //纹身机,
                    '56fdf91f3c492f03274ec85e',//色料
                    '570e2f47a77bb50929c31e62', //针
                    '570e30171690c02229359dd4',//手柄
                    '57188ea7ed2fdae816cd4192', //电源
                    '570e31c810263f5e29a8a623', //修护
                ],

                sec_kill: [],
                hot_sale: [],
                machine_brand: [],
                goods: []
            };
        },
        init: function () {
            console.log('init');

        }, created: function () {
            console.log('created');

        }, compiled: function () {
            console.log('complied');
        },
        attached: function () {
            if (positionCache[this.$route.path]) {
                window.scrollTo(0, positionCache[this.$route.path]);
            }
        },
        ready: function () {

            var self = this;
            http.get({url: apiList.getInfo, jsonp: true}).then(function (obj) {

                if (obj.code != 0)return '';//todo 跳到错误页去!
                obj = obj.data;

                self.banner.items = obj.banner || [];
                self.sec_kill = obj.sec_kill || [];
                self.hot_sale = obj.hot_sale || [];
                self.machine_brand = obj.machine_brand || [];

                self.listOrder.forEach(function (n_cate_id) {
                    obj.goods.forEach(function (good) {
                        if (n_cate_id == good.category._id)
                            self.goods.push(good);
                    })
                });

                secKillTimer = setInterval(function () {
                    var isFinish = true;
                    self.sec_kill.forEach(function (secKill) {
                        if (secKill.time_kill > 0) {
                            secKill.time_kill -= 1000;
                            isFinish = false;
                        }
                    });
                    if (isFinish)
                        clearInterval(secKillTimer);
                }, 1000);

                self.$nextTick(function () {
                    new IScroll('.bannerArea',
                            {
                                snap: true,
                                tap: true,
                                scrollX: true,
                                scrollY: false
                            }
                    );
                }, 200)

            }).catch(function () {

            });

        },

        detached: function () {
            clearInterval(secKillTimer);
        },

        methods: {
            goTo: function (type, item) {
                if (type == 'sku')
                    this.$route.router.go({name: 'product', params: {sku_id: item._id, spu_id: 0}});
                else if (type == 'spu')
                    this.$route.router.go({name: 'productsBySpu', params: {spu: item._id, spu_name: item.title}});
            },

            bannerClick: function (url) {
                if (url)
                    location = url
            }
            ,
            getSecKillDateStr: function (secKill) {
                var nextD = new Date();
                nextD.setDate(nextD.getDate() + 1);
                nextD.setMinutes(0);
                nextD.setHours(0);
                nextD.setSeconds(0);

                var curr = Date.now();

                var startT = curr + secKill.time_kill;
                var isInCurrDay = startT < nextD.getTime();

                if (isInCurrDay) {
                    return timeFormat(secKill.time_kill, 'hh:mm:ss后开始');
                } else {
                    return dateFormat(startT, 'MM月dd日h点开始')
                }
            }
        }
    }
</script>
<style scoped>
    .bannerArea {
        background-color: #f0f0f0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .slider {
        position: relative;
        white-space: nowrap;
        display: inline-block;
    }

    .banner {
        float: left;
        display: inline-block;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .box-title {
        height: 36px;
        padding: 0 8px;
        font-size: 13px;
        color: #888888;
    }

    .box-title > span {
        vertical-align: middle;
    }

    .item {
        float: left;
        width: 50%;
        margin-bottom: 8px;
    }

    .item:nth-child(even) > div {
        margin: 0 8px 0 4px;
    }

    .item:nth-child(odd) > div {
        margin: 0 4px 0 8px;
    }

    .item > div {

    }

    .item p {
        font-size: 12px;
        line-height: 1em;
        height: 2em;
    }

    .item .price-red {
        color: #ff0000;
        font-size: 12px;
        font-weight: normal;
    }

    .item .price-gray {
        color: #888888;
        text-decoration: line-through;
        font-size: 10px;
    }

    .item img {
        width: 100%;
        background: #f0f0f0;
    }

    .tag-timer::before {
        content: '';
        display: inline-block;
        width: 10px;
        height: 100%;
        background: url(../../static/img/ic_clock.png) no-repeat center;
        background-size: contain;
        margin: 0 2px;
        vertical-align: middle;
    }

    .tag-timer > span {
        vertical-align: middle;
    }

    .tag-timer, .tag-last, .tag-sellout {
        display: inline-block;
        font-size: 10px;
        height: 16px;
        padding: 0 4px 0 2px;
        position: absolute;
    }

    .tag-timer {
        color: white;
        background: rgba(0, 0, 0, 0.7);

    }

    .tag-last {
        margin-top: 16px;
        color: white;
        background: #ff0000;
    }

    .tag-sellout {
        color: white;
        background: rgba(0, 0, 0, 0.7);
    }

    .hotsaleArea {
        width: 100%;
        height: 116px;
        overflow: hidden;
    }

    .hot-item {
        display: inline-block;
        width: 100px;
        height: 100px;
        margin: 4px;
        vertical-align: top;
    }

    .hot-item > img {
        width: 100%;
        height: 100%;
    }

    .hot-item > p {
        font-size: 10px;
        padding: 0.5em;
        height: 2em;
        background: rgba(255, 255, 255, 0.7);
        letter-spacing: normal;
        overflow: hidden;
        position: relative;
        line-height: 1em;
        top: -3em;
    }

    .brand-title::before {
        content: '';
        display: block;
        height: 1px;
        margin: 0 30px;
        background-color: #f0f0f0;
        position: relative;
        top: 13px;
    }

    .brand-title > span {
        color: #888888;
        display: block;
        margin: auto;
        width: 5em;
        text-align: center;
        padding: 4px;
        background: white;
        font-size: 10px;
        position: relative;
    }

    .brand {
        width: 100px;
        height: 100px;
        display: inline-block;
    }

    .brand > img {
        width: 100px;
        height: 100px;
    }

    .brandArea {
        overflow: hidden;
        white-space: nowrap;
        padding-left: 8px;
    }

    .categoryArea {
        padding-top: 8px;
    }

</style>